<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GoMoKu - a five chess game online</title>
    <style>
        body{
            width: 1000px;
        }
        table{
            width: 400px;
            height: 40px;
            border-collapse: collapse; /* 合并边框，布局棋盘 */
            border: 3px solid black;
            text-align: center;
        }
        /* 游戏菜单 */
        .menu{
            width: 600px;
            margin-top: 50px;
            margin-left: 350px;
        }
        /* 棋盘 */
        .board{
            width: 400px;
            height: 400px;
            margin-top: 100px;
            margin-left: 200px;
            display: none;
        }
        /* 每个方格 */
        .square{
            width: 40px;
            height: 40px;
            background-image: url(../static/images/background.gif);
            background-size: cover;
            border: 1px solid black;
        }
        /* 按键 */
        .button{
            width: 250px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            color: #0a0a0a;
            border-radius: 3px;
            margin:0 20px 20px 0;
            position: relative;
        }
        /* 信息文字 */
        .infotext{
            width: 50px;
            height: 30px;
            padding: 0;
            border: 1px solid black;
        }
        /* 游戏信息 */
        .information{
            width: 100px;
            height: 60px;
            margin-top: -250px;
            margin-left: 700px;
            display: none;
        }
        *{
            margin: 0; /* 外边距消除 */
            padding: 0; /* 内边距消除 */
        }
    </style>
</head>
<body>
    <!-- 主菜单 -->
    <div class="menu">
        <h1 style="margin-left: 50px;">GoMoKu - 在线五子棋游戏平台</h1>
        <p id="hello" style="margin-left: 100px; margin-top: 80px;"></p>
        <p id="info" style=" margin-top: 20px; margin-left: 100px;">您可以点击下方的“开始游戏”按钮，体验GoMoKu!</p>
        <button class="button" id="startbutton" style=" margin-top: 60px; margin-left: 100px;">开始游戏</button>
    </div>
    <!-- 棋盘 -->
    <div class="board">
        <table>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
            <tr>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
            </tr>
        </table>
    </div> 
    <!-- 游戏信息 -->
    <div class="information">
        <table>
            <tr>
                <td class="infotext">对手名字</td>
                <td class="infotext" id="opponentname"></td>
            </tr>
            <tr>
                <td class="infotext">己方棋色</td>
                <td class="infotext" id="selfchesscolor"></td>
            </tr>
            <tr>
                <td class="infotext">当前执棋方</td>
                <td class="infotext" id="havechesscolor"></td>
            </tr>
            <tr>
                <td class="infotext">回合数</td>
                <td class="infotext" id="round"></td>
            </tr>
        </table>
    </div>
    <script>
        // 颜色常量
        const any = 0
        const white = 1
        const black = 2

        // 消息类型
        const register = 0 // 注册
        const pair = 1 // 配对
        const move = 2 // 落子
        const end = 3 // 结束
        const close = 4 // 非正常结束

        // 状态类型
        const yes  = 1
        const no    = 0

        var player = new playerinfo()
        let turncolor = black // 当前执棋方
        let owncolor = black // 自己的棋色
        let addchess = any // 棋盘添加棋子的颜色
        let boardcontent = [] // 棋盘内容记录
        let round = 0 // 回合数，也就是白的下了几次
        let gameover = false // 游戏结束

        var ws = new WebSocket("ws://116.205.137.205:8080/socket")

        ws.onerror = function(e){
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            console.log("服务器异常")
            alert("非常抱歉！服务器出现异常，GoMoKu暂时不能游戏")
            document.getElementById("startbutton").onclick = server_error
        }

        // 连上服务器
        ws.onopen = function(){
            console.log("已经连上服务器")
            player.name = prompt("欢迎来到GoMoKu。请输入您的用户名，以开始游戏。")
            while(player.name==null || player.name=="") player.name = prompt("请输入您的用户名，用户名不能为空！")
            ws.send(JSON.stringify({type:register, playername:player.name}))
        }


        ws.onmessage = function(msg_origin){
            let msg = JSON.parse(msg_origin.data)
            console.log(msg)

            switch(msg.type){
                case register:
                    if(msg.status == yes){
                        document.getElementById("hello").innerHTML = "欢迎您，" + player.name + "!"

                        player.id = msg.playerid

                        // 可以匹配
                        document.getElementById("startbutton").onclick = pairgame

                    }
                    else{
                        register_error()
                        document.getElementById("startbutton").onclick = register_error
                    }
                    break
                case pair:
                    if(msg.status == yes){
                        document.getElementById("info").innerHTML = "您可以点击下方的“开始游戏”按钮，体验GoMoKu!"
                        console.log("匹配成功")
                        pair_success()
                        document.getElementById("opponentname").innerHTML = msg.opponent

                        for(let i=0; i<10; ++i){
                            boardcontent.push([any,any,any,any,any,any,any,any,any,any])
                        }
                        
                        // 添加棋子的颜色
                        owncolor = msg.color
                        if(owncolor == black)
                            document.getElementById("selfchesscolor").innerHTML = "黑"
                        else
                            document.getElementById("selfchesscolor").innerHTML = "白"

                        document.getElementsByClassName("menu")[0].style.display = "none"
                        document.getElementsByClassName("information")[0].style.display = "block"
                        document.getElementsByClassName("board")[0].style.display = "block"

                        // 初始化
                        document.getElementById("havechesscolor").innerHTML = "黑"
                        document.getElementById("round").innerHTML = 0

                        // 棋盘格子
                        for(let i=0; i<100; i++){
                            document.getElementsByClassName("square")[i].onclick = clickonchess
                        }

                        for(let i=0; i<100; i++){
                            document.getElementsByClassName("square")[i].style.backgroundImage = null
                        }
                        
                    }
                    else{
                        pair_error()
                    }
                    break
                case close:
                    close_error()
                    returnmenu()
                    break
                case move:
                    if(msg.color == white) addchess = "url(../static/images/whiteStone.gif)"
                    else addchess = "url(../static/images/blackStone.gif)"
                    document.getElementsByClassName("square")[10*msg.row + msg.col].style.backgroundImage = addchess
                    document.getElementById("round").innerHTML = msg.rounds
                    if(msg.turn == black)
                        document.getElementById("havechesscolor").innerHTML = "黑"
                    else
                        document.getElementById("havechesscolor").innerHTML = "白"
                    break
                case end:
                    if(msg.playerid == player.id) end_win()
                    else end_lose()
                    sleep(5000)
                    returnmenu()

            }
        }

        // 用户信息
        function playerinfo(){
            this.id = -1 
            this.name = ""
        }

        // 连接错误
        function server_error(){
            alert("非常抱歉！服务器出现异常，GoMoKu暂时不能游戏");
        }

        // 注册错误
        function register_error(){
            alert("非常抱歉！注册失败，GoMoKu暂时不能游戏");
        }

        // 匹配错误
        function pair_error(){
            alert("非常抱歉！匹配失败，GoMoKu暂时不能游戏");
        }

        function end_win(){
            alert("游戏结束，你赢啦！");
        }

        function end_lose(){
            alert("游戏结束，你输啦！");
        }

        // 匹配错误
        function close_error(){
            alert("非常抱歉！对手离场，请重新匹配");
        }

        function returnmenu(){
            document.getElementsByClassName("menu")[0].style.display = "block"
            document.getElementById("startbutton").style.display = "block"
            document.getElementsByClassName("information")[0].style.display = "none"
            document.getElementsByClassName("board")[0].style.display = "none"
        }

        function pair_success(){
            alert("匹配成功，进入游戏");
        }


        // 游戏匹配
        function pairgame() {
            if (ws.readyState===1) {
                document.getElementById("startbutton").style.display = "none"
                document.getElementById("info").innerHTML = "正在匹配中，请耐心等待..."
                ws.send(JSON.stringify({type:pair, playerid:player.id}))
            }
            else
                server_error()
        }

        function clickonchess(){
            ws.send(JSON.stringify({type:move, playerid:player.id, row:this.parentNode.rowIndex, col:this.cellIndex}))
        }

        function sleep(delay) {
            var start = (new Date()).getTime()
            while((new Date()).getTime() - start < delay) {
                continue
        }
}
        
    </script>  
</body>
</html>

